<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.name" clearable style="width: 160px;" placeholder="输入车辆规格" />
      <el-input v-model="listQuery.length" clearable style="width: 110px;" placeholder="输入车长" />
      <el-input v-model="listQuery.width" clearable style="width: 110px;" placeholder="输入车宽" />
      <el-input v-model="listQuery.height" clearable style="width: 110px;" placeholder="输入车高" />
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" icon="el-icon-search" @click="handleFilter">查找
      </el-button>
      <el-button type="primary" icon="el-icon-add" @click="handleCreate">添加
      </el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit
      highlight-current-row>

      <el-table-column align="center" width="160" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑
          </el-button>
          <el-button type="warning" size="mini" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>

      <el-table-column align="center" width="180" label="ID" prop="id" />

      <el-table-column align="center" label="规格" prop="name" />

      <el-table-column align="center" label="载重" prop="carLoad" />

      <el-table-column align="center" label="长" prop="length" />

      <el-table-column align="center" label="宽" prop="width" />

      <el-table-column align="center" label="高" prop="height" />

      <el-table-column align="center" label="体积" prop="volume" />

      <el-table-column align="center" width="130" label="图片" prop="pictures">
        <template slot-scope="scope">
          <img class="table-img" :src="scope.row.pictures" alt />
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
      @pagination="getList" />

    <el-dialog :visible.sync="show" title="车辆规格" :modal="false" @close="closeViewer">
      <el-form ref="dataForm" :rules="rules" :model="carSpecifications" label-position="left" label-width="100px">
        <el-form-item label="规格名称" prop="name">
          <el-input v-model="carSpecifications.name" />
        </el-form-item>
        <el-form-item label="载重" prop="carLoad">
          <el-input type="number" v-model="carSpecifications.carLoad" />
        </el-form-item>
        <el-form-item label="长" prop="length">
          <el-input type="number" v-model="carSpecifications.length" />
        </el-form-item>
        <el-form-item label="宽" prop="width">
          <el-input type="number" v-model="carSpecifications.width" />
        </el-form-item>
        <el-form-item label="高" prop="height">
          <el-input type="number" v-model="carSpecifications.height" />
        </el-form-item>
        <el-form-item label="体积" prop="volume">
          <el-input type="number" v-model="carSpecifications.volume" />
        </el-form-item>
        <el-form-item label="车辆图片">
          <el-upload action="http://139.155.89.213:8312/api/oss/photosupload" :limit="1" :file-list="picturesList"
            :on-exceed="uploadOverrun" :on-success="handleimgsUrl" :on-remove="handleRemove" multiple accept=".jpg, .jpeg, .png, .gif"
            list-type="picture-card">
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button v-if="!carSpecifications.id" type="primary" @click="handleEdit">添加规格</el-button>
          <el-button v-if="carSpecifications.id" type="primary" @click="handleEdit">修改规格</el-button>
          <el-button @click="closeViewer">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  import {
    listCarSpecifications,
    addCarSpecifications,
    updateCarSpecifications,
    deleteCarSpecifications
  } from '@/api/car'
  import Pagination from '@/components/Pagination'

  export default {
    name: 'specificationsList',
    components: {
      Pagination
    },
    data() {
      return {
        list: undefined,
        total: 0,
        listLoading: true,
        listQuery: {
          pageNum: 1,
          pageSize: 10,
          name: '',
          length: '',
          width: '',
          height: '',
        },
        show: false,
        update: false,
        picturesList: [],
        carSpecifications: {
          id: '',
          name: '',
          carLoad: '',
          length: '',
          width: '',
          height: '',
          volume: '',
          pictures: '',
        },
        rules: {
          name: [{
            required: true,
            message: '规格名称不能为空',
            trigger: 'blur'
          }],
          carLoad: [{
            required: true,
            message: '载重不能为空',
            trigger: 'blur'
          }],
          length: [{
            required: true,
            message: '车长不能为空',
            trigger: 'blur'
          }],
          width: [{
            required: true,
            message: '车宽不能为空',
            trigger: 'blur'
          }],
          height: [{
            required: true,
            message: '车高不能为空',
            trigger: 'blur'
          }],
          volume: [{
            required: true,
            message: '体积不能为空',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        listCarSpecifications(this.listQuery).then(res => {
          this.list = res.data.selectCarSpecificationByCondition
          this.total = res.data.allCount
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handleCreate() {
        // this.$router.push({
        //   path: '/goods/upsert'
        // })
        this.showViewer()
      },
      handleUpdate(row) {
        this.update = true
        this.carSpecifications.id = row.id
        this.carSpecifications.name = row.name
        this.carSpecifications.carLoad = row.carLoad
        this.carSpecifications.length = row.length
        this.carSpecifications.width = row.width
        this.carSpecifications.height = row.height
        this.carSpecifications.volume = row.volume
        this.carSpecifications.pictures = row.pictures
        this.picturesList = [{
          url: row.pictures
        }]
        this.showViewer()
      },
      handleDelete(row) {
        this.$confirm('此操作将永久删除该规格, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return Promise.resolve(deleteCarSpecifications({
            id: row.id
          })).then(() => {
            let msg = '删除成功'
            this.$message.success(msg)
            this.list.splice(this.list.findIndex(item => item.id === row.id), 1)
          }).catch(() => {})
        }).catch(() => {
          console.log("cancel")
        })
      },
      handleEdit() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            if (this.update) {
              updateCarSpecifications(this.carSpecifications).then(res => {
                let msg = '修改成功'
                console.log(res)
                this.$message.success(msg)
                this.closeViewer()
                this.handleFilter()
              }).catch(() => {
                this.closeViewer()
              })
            } else {
              addCarSpecifications(this.carSpecifications).then(res => {
                let msg = '添加成功'
                this.$message.success(msg)
                this.closeViewer()
                this.handleFilter()
              }).catch(() => {
                this.closeViewer()
              })
            }
          }
        })
      },
      handleimgsUrl(res, file, fileList) {
        this.picturesList = fileList
        this.carSpecifications.pictures = fileList[0].response.photos
      },
      handleRemove(file, fileList) {
        this.picturesList = fileList
        this.carSpecifications.pictures = ''
      },
      uploadOverrun() {
        this.$message.error('上传文件个数超出限制!最多上传1张图片!')
      },
      showViewer(e) {
        this.show = true
      },
      closeViewer(e) {
        this.show = false
        this.update = false
        this.carSpecifications.id = ''
        this.carSpecifications.name = ''
        this.carSpecifications.carLoad = ''
        this.carSpecifications.length = ''
        this.carSpecifications.width = ''
        this.carSpecifications.height = ''
        this.carSpecifications.volume = ''
        this.carSpecifications.pictures = ''
        this.picturesList = []
      },
    }
  }
</script>
<style lang="less" scoped>
  .table-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
  }
</style>
